<template>
  <div class="box">
    <div class="box_nav">
      <h1>用户管理</h1>
      <p class="button_nav">
        <el-button type="primary" size="small" icon="el-icon-edit" class="button">添加商品</el-button>
      </p>
      <p>当前商品分类ID：</p>
    </div>
    <!-- 商品分类 -->

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%" stripe>
      <el-table-column prop="id" label="用户ID"></el-table-column>
      <el-table-column prop="username" label="用户名称"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="updateTime" label="电话"></el-table-column>
      <el-table-column prop="createTime" :formatter="dateFormat" label="注册时间"></el-table-column>

      <!-- <el-table-column prop="data" label="注册时间" :formatter="dateFormat"></el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <Page @pageadd="pageadd" :total="total"></Page>
  </div>
</template>

<script>
import { UserList } from "../../request/http";
import Page from "../page/Page";
import moment from "moment";
export default {
  data() {
    return {
      tableData: [],
      stores: {
        pageNum: 1,
        pageSize: 7,
      },
      total:0
    };
  },
  methods: {
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 分页
    pageadd(page) {
      // console.log(page);
      this.stores.pageNum = page;
      // console.log(this.stores);
      UserList(this.stores)
        .then((res) => {
          // console.log(res.data.data.list);
          this.tableData = res.data.data.list;
        })
        .catch((error) => {
          // window.console.log(error);
        });
    },
  },
  components: {
    Page,
  },
  mounted() {
    UserList(this.stores).then((res) => {
      // console.log(res.data.data);
      this.total= res.data.data.total
      this.tableData = res.data.data.list;
    });
  },
  computed:{
    dateFormat(){
      return this.$dateFormat
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
.box {
  padding: 20px;
}
.button {
  // width: 100%;
  @include bgColor(#398dd6);
  @include FontOnly(16px);
}
.button:hover {
  @include bgColor(#2e6da4);
}
.box_nav {
  width: 100%;
  height: 110px;
  // display: flex;
}
.box_nav > h1 {
  font-size: 30px;
  font-weight: 400;
}
.button_nav {
  margin-left: 1000px;
  // float: right;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
.box_input {
  display: flex;
  width: 40%;
  justify-content: space-between;
}
.scopeItem {
  background: orange;
  color: white;
  padding: 3px;
  margin-left: 5px;
  border-radius: 5px;
  font-size: 14px;
}
</style>